<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			.base{
				width: 50px;
				height: 50px;
			}
			.c1{
				border: 1px solid red;
			}
			.c2{
				background-color: yellow;
			}
			.c3{
				color:blue;
			}
			.c4{
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="app">
		  <div class="base" :class="cls">
		  	你好啊1
		  </div>
		  <div class="base" :class="30>20?cls:''">
		  	你好啊2
		  </div>
		  <div class="base" :class="{c1:true}">
		  	你好啊3
		  </div>
		  <div class="base" :class="['c1','c2','c3']">
		  	你好啊4
		  </div>
		  <div class="base" :class="[{c1:true},'c4']">
		  	你好啊5
		  </div>
		  
		  <div class="base" :style="{border:'1px solid red'}">
		  	你好啊6
		  </div>
		  <div class="base" :style="styleObj">
		  	你好啊7
		  </div>
		  <div class="base" :style="[{border:'1px solid red'},styleObj]">
		  	你好啊7
		  </div>
		</div>
		
		<script>
		Vue.config.productionTip = false
		var vm = new Vue({
		  el: '#app',
		  data: {
		    cls: 'c1',
			styleObj:{
				backgroundColor:'orange',
				fontSize:'19px'
			}
		  }
		})
		</script>
	</body>
</html>
